<template>
  <div class="table-outer">
    <proTable class="table-st" :loading="page.tableLoad" @selectionDada="getselectionDada" :columns="page.columns" :data="page.data" @clickPage="onClickPage" :current="job_param.start_recd" :total="page.total"
      :pageSize="job_param.limit_recd"></proTable>
    <canvas-temp-list ref="canvasTempListDom" :canvasItem="item" v-for="(item,index) in arr_collection" :key="index" style="margin-top:100px"></canvas-temp-list>
    <canvas-temp ref="canvasDom" style="margin-top:100px"></canvas-temp>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import canvasTempList from "_c/tableReport/canvasTempList.vue";
import canvasTemp from "_c/tableReport/canvasTemp.vue";
export default {
  name: 'tableList',
  components: {
    canvasTempList,
    canvasTemp
  },
  data() {
    return {
      job_param: {
        job_id: null,
        start_recd: 1,//开始数据
        limit_recd: 12,//查询的条数
      },
      arr_collection: [],
      page: {
        subscribeState: 0,
        tableLoad: false,
        allTotal: 0,
        columns: [
          {
            type: "selection",
            width: 60,
            className: "selecLeft",
            align: "center",
            tooltip: true
          },
          {
            title: "序号",
            type: 'index',
          },
          {
            title: "底片名称",
            minWidth: 100,
            key: "file_name",
            tooltip: true
          },
          {
            title: "底片标识号",
            key: "label_no",
            minWidth: 100,
            tooltip: true,
            render: (h, params) => {
              if (params.row.label_no) {
                let curarr = [];
                let list = params.row.label_no.split('jt')
                if (list[list.length - 1] == "") {
                  list.pop()
                }
                list.map((v) => {
                  let arr = [h('span', {}, v), h("YsIcon", { props: { type: "md-arrow-round-up" } })]
                  curarr.push(...arr)
                })
                return h("div", curarr)
              } else {
                return h('span', {}, params.row.label_no)
              }
            }
          },
          {
            title: "缺陷数量",
            minWidth: 100,
            key: "flaw_num",
            tooltip: true
          },
          {
            title: "缺陷等级",
            minWidth: 100,
            key: "flaw_level",
            tooltip: true,
            render: (h, params) => {
              if (params.row.flaw_level == 1) {
                return h('span', { class: 'text-overflow' }, 'Ⅰ级')
              }
              if (params.row.flaw_level == 2) {
                return h('span', { class: 'text-overflow' }, 'Ⅱ级')
              }
              if (params.row.flaw_level == 3) {
                return h('span', { class: 'text-overflow' }, 'Ⅲ级')
              }
              if (params.row.flaw_level == 4) {
                return h('span', { class: 'text-overflow' }, 'Ⅳ级')
              }
            }
          },
          {
            title: "检测结果",
            width: 160,
            render: (h, params) => {
              return h("div", [
                h("span", {
                  domProps: {
                    innerText: "查看",
                  },
                  class: "textColor",
                  on: {
                    click: (event) => {
                      this.goToDetails(params.row, params.index)
                    },
                  }
                }),
                h("span", {
                  domProps: {
                    innerText: "下载",
                  },
                  class: "textColor",
                  on: {
                    click: (event) => {
                      this.getDdfData(params.row, params.index)
                    },
                  }
                })
              ])
            }
          }
        ],
        data: [],
      },
    }
  },
  mounted() {
    if (this.$route.query && this.$route.query.id) {
      this.job_param.job_id = Number(this.$route.query.id)
      this.getImagseList()
    } else {
      this.$YsMessage.error('未获取到id');
    }
  },
  methods: {
    ...mapActions(['getDetectJobList', 'getFileLastUseTempListAPI']),
    //选中页面内容
    getselectionDada(data) {
      this.arr_collection = data
    },
    //获取数据
    getImagseList() {
      let parmes = { job_id: this.job_param.job_id, ...this.$parent.$refs.selectorDom.searchBean }
      parmes.file_level = parmes.file_level || null
      this.getDetectJobList({ ...this.job_param, searchBean: parmes }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.jobBean = data.jobBean
          this.$emit("getjob", this.jobBean)
          this.page.total = data.all_recd
          if (data.detectFileBeans && data.detectFileBeans.length > 0) {
            this.page.data = data.detectFileBeans.map(v => {
              return Object.assign({}, { ...v, qualified: false, _disabled: v.hasOwnProperty('template_id') ? false : true })
            })
            this.file_id = data.detectFileBeans[0].id
          } else {
            this.jobBean = this.$options.data().jobBean
            this.page.data = this.$options.data().detectFileBeans
          }
        } else {
          this.jobBean = this.$options.data().jobBean
          this.page.data = this.$options.data().detectFileBeans
        }
      })
    },
    //分页
    onClickPage(pageNum) {
      this.job_param.start_recd = pageNum;
      this.getImagseList();
    },
    //下载png和pdf
    getTableAll(num) {
      if (this.arr_collection.length == 0) this.$YsMessage.info("请选择数据")
      this.$refs.canvasTempListDom.map((v, index) => {
        v.onExport(num)
      })
    },

    //下载png和pdf
    async getDdfData(row) {
      if (row.hasOwnProperty('template_id')) {
        let res = await this.$refs.canvasDom.getParmasData({ template_id: row.template_id, file_id: row.id })
        if (res) {
          setTimeout(() => {
            this.$refs.canvasDom.onExport(1)
          }, 1000)
        }
      } else {
        this.$YsMessage.info("未选择模板")
      }
    },

    //查看跳转详情
    goToDetails(item, index) {
      this.$router.push({ path: '/pictureImgDetails', query: { dataDetailsId: item.id, detect_name: this.$route.query.detect_name, dataListId: this.$route.query.id, index: index } });
    },
  }
}
</script>

<style scoped lang='less'>
/deep/ .textColor {
  // color: '#0091FF';
  cursor: pointer;
  color: #0091ff;
  margin-right: 8px;
  &:hover {
    opacity: 0.8;
  }
}
.table-outer {
  height: 100%;
  .table-st {
    height: calc(100% - 70px);
  }
}
</style>